<template>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check="false"
      @load="onLoad"
    >
     
        <commentItem @open-reply="$emit('open-reply',$event)" v-for="item in list" :key="item.last_id" :comment="item"></commentItem>
    </van-list>
</template>
<script>
import {getCommentList} from '@/api/comment'
import commentItem from '@/views/article/components/comment-item'
  export default {
    name: "CommentList",
    components:{commentItem},
    props: {
        // 源id 文章id或者评论id
        sourceId:{
            type:[String,Number],
            required:true
        },
        // 重新定义列表数据 用于文章评论列表
        list:{
          type:Array,
          default:()=> []
        },
         type:{
        default:'a',
        validator(val) {
          return ['a','c'].includes(val)
        }
      }
    },
    created() {
      this.loading=true //自己打开loading
      this.onLoad() //解决长文章一开始进入不显示内容问题
    },
    data() {
      return {
        // list: [], // 评论列表
        loading: false, // 上拉加载更多的 loading
        finished: false, // 是否加载结束
        offset:null, //偏移量
        limit:10 //每页数量
      };
    },

    methods: {
    async  onLoad() {
          try {
              let {data} =await getCommentList ({
                  type:this.type, //a 对文章的评论  c 对某个评论的回复
                  source:this.sourceId, // 源id 文章id或者评论id
                  offset:this.offset,
                  limit:this.limit
              })
              console.log(data);
            //   追加数据到列表
            this.list.push(...data.data.results)
            // 通知父组件更新评论总数
            this.$emit('update-total',data.data.total_count)
            // 3 关闭loading 
            this.loading=false
            // 4 判断是否结束
            if(data.data.results.length <this.limit) {
            // 结束了 finished 为true 
            this.finished=true
            }else {
                // 页码变化
                this.offset=data.data.last_id
            }
          } catch (error) {
              console.log(error);
          }
      }
    }
  };
</script>